<template><div><h1 id="二-变化" tabindex="-1"><a class="header-anchor" href="#二-变化" aria-hidden="true">#</a> 二.变化</h1>
<p>CSS 里变化这个属性属于 css 的一个精彩的革新，transform 属性允许多种变化效果的函数对元素进行改变。
变换分为两种：<code v-pre>2D</code>（重点）和 <code v-pre>3D</code>，需要知道三个轴 <code v-pre>xyz</code>。</p>
<h2 id="_1-transform-变化属性" tabindex="-1"><a class="header-anchor" href="#_1-transform-变化属性" aria-hidden="true">#</a> 1.transform 变化属性</h2>
<p>四个最常用的变化函数，分别是：</p>
<ul>
<li>translate 位移</li>
<li>scale 缩放</li>
<li>rotate 旋转</li>
<li>skew 扭曲</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token comment">/*一个变化函数*/</span>
<span class="token property">transform</span><span class="token punctuation">:</span>变化函数<span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">/*多个变化函数*/</span>
<span class="token property">transform</span><span class="token punctuation">:</span>变化函数<span class="token function">1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 变化函数<span class="token function">2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> ……
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-translate-位移函数" tabindex="-1"><a class="header-anchor" href="#_2-translate-位移函数" aria-hidden="true">#</a> 2.translate()位移函数</h2>
<p>translate()在 2d 变换中位移可以有 X 轴和 Y 轴的位移方向，参数可以使用长度单位，百分比对应的是自己的宽度
和高度，正直或者负值均可。</p>
<ul>
<li>transform: translateX(x); 沿 X 轴方向平移 正值左移 负值右移</li>
<li>transform: translateY(y); 沿 Y 轴方向平移 正值下移 负值上移</li>
<li>transform: translate(x, y); 沿 X 轴和 Y 轴同时平移</li>
<li>注意：位移和固定定为不同，它并没有脱离文档流，也不会影响其他元素的布局</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div:hover</span> <span class="token punctuation">{</span>
    <span class="token comment">/*X轴方向移动*/</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/*Y轴方向移动*/</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/*默认x轴移动*/</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/*x轴和y轴一起移动*/</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-100px<span class="token punctuation">,</span> 200px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>元素居中，之前 margin 负值是需要知道元素的宽度和高度，使用 translate 百分比值则不需要</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.box div</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-rotate-旋转函数" tabindex="-1"><a class="header-anchor" href="#_3-rotate-旋转函数" aria-hidden="true">#</a> 3.rotate()旋转函数</h2>
<ul>
<li>rotate()函数在 <code v-pre>2d</code> 变换中旋转只能以 Z 轴进行旋转，所以 rotate()函数默认为 Z 轴旋转函数。</li>
<li>参数为旋转角度，deg 单位为旋转角度。角度可以为正值或负值。</li>
<li>旋转中心点，是元素最中心的点</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div:nth-child(1):hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div:nth-child(2):hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-90deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-scale-缩放函数" tabindex="-1"><a class="header-anchor" href="#_4-scale-缩放函数" aria-hidden="true">#</a> 4.scale()缩放函数</h2>
<ul>
<li>scale()缩放函数中的参数是以倍数为基础的，1 代表当前大小</li>
<li>1 以上的“正数”为当前大小的倍数。</li>
<li>1 以下 0 以上的“正数”为缩小的倍数。</li>
<li>0 倍为消失</li>
<li>当参数值为负值的时候，元素进行镜面翻转，同样倍数会起作用</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div:hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>2<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span>0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div:hover</span> <span class="token punctuation">{</span>
     <span class="token comment">/* 负值代表镜面翻转，同样倍数仍然管用 */</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span>-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_5-skew-倾斜扭曲函数" tabindex="-1"><a class="header-anchor" href="#_5-skew-倾斜扭曲函数" aria-hidden="true">#</a> 5.skew()倾斜扭曲函数</h2>
<ul>
<li>skew()在 <code v-pre>2d</code> 变换中倾斜可以有 X 轴和 Y 轴的倾斜角度</li>
<li>填写旋转角度，deg 单位为旋转角度，角度可以为正值或负值。</li>
<li>skew()默认为 X 轴倾斜函数</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div:hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewX</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewX</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewY</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewY</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skew</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_6-变换函数的执行顺序" tabindex="-1"><a class="header-anchor" href="#_6-变换函数的执行顺序" aria-hidden="true">#</a> 6.变换函数的执行顺序</h2>
<p>当变换属性需要叠加使用时，不可以生明多个 transform 属性，而是需要把所有要使用的变换函数添加在一个transform 属性中，用空格分隔。但存在前后顺序问题。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token comment">/*用控制台改变旋转角度看效果*/</span>
<span class="token selector">div:nth-child(1):hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*用控制台改变旋转角度看效果*/</span> 
<span class="token selector">div:nth-child(2):hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_7-基点" tabindex="-1"><a class="header-anchor" href="#_7-基点" aria-hidden="true">#</a> 7.基点</h2>
<p>transform-origin 属性是可以改变元素变化时的原点，默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.box1</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box1:hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateZ</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box2</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
    <span class="token property">transform-origin</span><span class="token punctuation">:</span> top left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box2:hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateZ</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>在变化中，任何元素都有一个中心原点。默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。</li>
<li>transform-origin 属性取值有两种：一种是“长度值”；另外一种是“关键字”。</li>
<li>当取值为长度值时，单位可以为 px、em 和百分比等。</li>
</ul>
<table>
<thead>
<tr>
<th>关键字</th>
<th>百分比</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>top left</td>
<td>0 0</td>
<td>左上</td>
</tr>
<tr>
<td>top center</td>
<td>50% 0</td>
<td>靠上居左</td>
</tr>
<tr>
<td>top right</td>
<td>100% 0</td>
<td>右上</td>
</tr>
<tr>
<td>left center</td>
<td>0 50%</td>
<td>靠右居中</td>
</tr>
<tr>
<td>center center</td>
<td>50% 50%</td>
<td>正中</td>
</tr>
<tr>
<td>right center</td>
<td>100% 50%</td>
<td>靠右居中</td>
</tr>
<tr>
<td>bottom left</td>
<td>0 100%</td>
<td>左下</td>
</tr>
<tr>
<td>bottom center</td>
<td>50% 100%</td>
<td>靠下居中</td>
</tr>
<tr>
<td>bottom right</td>
<td>100% 100%</td>
<td>右下</td>
</tr>
</tbody>
</table>
<h2 id="_8-3d-变化效果" tabindex="-1"><a class="header-anchor" href="#_8-3d-变化效果" aria-hidden="true">#</a> 8.3D 变化效果</h2>
<h3 id="_1-透视" tabindex="-1"><a class="header-anchor" href="#_1-透视" aria-hidden="true">#</a> (1)透视</h3>
<p>在 css 变换中如果想作出 3d 效果，一定要关注透视距离 perspective 属性。
perspective 属性值越大，元素的变形就越小。
perspective 属性值越小，元素的变形就越大。</p>
<ul>
<li>perspective 属性定义透视距离，距离为长度单位</li>
<li>模拟人眼睛到 3D 变化元素之间的距离</li>
<li>【重点】透视距离只能定义在 3D 变化的父元素上</li>
</ul>
<h3 id="_2-旋转函数-x-轴和-y-轴" tabindex="-1"><a class="header-anchor" href="#_2-旋转函数-x-轴和-y-轴" aria-hidden="true">#</a> (2)旋转函数 x 轴和 y 轴</h3>
<p>2d 中旋转是 z 轴旋转，而想要感受 3d 效果，需要旋转的 x 轴和 y 轴。</p>
<ul>
<li>transform:rotateX(deg); x 轴旋转</li>
<li>transform:rotateY(deg); y 轴旋转</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
    <span class="token comment">/*父级给透视,距离越小感觉离自己越近*/</span>
    <span class="token property">perspective</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box > div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.x</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.y</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


